<template>
    <div>
        <el-row>
            <el-form :inline="true" ref="form" :model="form" label-width="66px" class="demo-form-inline" clo>

                <el-form-item>
                    <pers-button type="primary" @click="add" size="mini" perms="kanke:textbook:courseware:add"
                        label="添加"></pers-button>
                </el-form-item>
                <el-form-item label="" prop="type">
                    <el-select size="mini" v-model="form.type" @change="handleSelectChange" placeholder="更多操作"
                        filterable clearable>
                        <el-option :value="2" label="移动"
                            v-if="hasPermission('kanke:textbook:courseware:move')">移动</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="title">
                    <el-input size="mini" placeholder="输入教材名称" v-model="form.title" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" size="mini">筛选</el-button>
                </el-form-item>
                <el-form-item class="backbtn1">
                    <BackBtn type="primary" size="mini" @click="$router.go(-1)">返回</BackBtn>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-row class="pt20">

                <div v-show="showControlButton2">
                    <el-button icon="" size="mini" @click="selectFiles()" type="" style="width: 120px;">确定</el-button>
                    <el-button icon="" size="mini" @click="hideMoveFiles()" type="" style="width: 120px;">取消</el-button>
                </div>

            </el-row>

            <el-row>
                <div class="content">
                    <div class="content__item" v-for="(item, index) in tableData" :key="index">
                        <div>
                            <p></p>
                            <div style="position: relative;display: inline-block">
                                <img :src="item.cover_url" alt="暂无图片"
                                    style="vertical-align: middle;width: 170px; height: 150px;position: relative;">
                                <el-alert :title="showType(item.book_type)" type="success"
                                    style="width: 75px;height:22px;top:0;background-color: #00FFFE;text-align: center;color: black;position: absolute;left: 0;"
                                    :closable="false">
                                </el-alert>
                                <label class="checkbox-label" v-if="item.is_folder != 1">
                                    <input type="checkbox" class="checkbox" name="courseware_name" :value="item.id"
                                        style="width: 20px;height: 20px;">
                                </label>
                            </div>
                            <p style="width: 169px;height: 63px;overflow: hidden;text-overflow:ellipsis;
                               display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space: break-spaces;">
                                {{ item.title }}
                            </p>
                            <p>
                                <pers-button type="" size="mini" perms='kanke:textbook:courseware:sound'
                                    label="录题"></pers-button>
                                <pers-button type="" size="mini" style="color: red;margin-left: 0px;" @click="delFile(item.id, 1)"
                                    perms='kanke:textbook:courseware:del' label="删除"></pers-button>
                                <el-button  type="primary" size="small" style="margin-left: 0px;" @click="handleSortItem(item)">排序-{{
                                    item.folder_sort }}</el-button>
                            </p>
                        </div>
                    </div>
                </div>
            </el-row>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
                </el-pagination>
            </div>
        </el-row>
        <div v-if="showAddCourseWareVisible">
            <show-add-course-ware :visible.sync="showAddCourseWareVisible" :folder_id="form.id" :task_type="999"
                :edit_task_courseware_id_arr="edit_task_courseware_id_arr"
                @handleSelectFiles="handleSelectFiles"></show-add-course-ware>
        </div>

        <div v-if="ShowFolderVisible">
            <show-folder-list :visible.sync="ShowFolderVisible" :mutiFileIds="multipleSelection"
                @reloadInit="reloadInit"></show-folder-list>
        </div>
    </div>
</template>
<script>
import { hasPermission, isShow } from '@/common/permission';
import { pageSizes } from '@/constant/index.js'
import { folderDetail, delFile, addFolderFile,sortFolderCourseware } from "@/api/kanke/textbook/coursewarepub";
import ShowAddCourseWare from "./components/ShowAddCourseWare";
import ShowFolderList from "./components/ShowFolderList";
import PersButton from '../../../../components/PersButton.vue';
import { eidtReadModuleCoursewarePublish } from "@/api/kanke/textbook/read";
export default {
    name: "folderdetailcontent",
    components: {
        ShowAddCourseWare,
        ShowFolderList,
        PersButton
    },
    data() {
        return {
            loading: false,
            showControlButton2: false, //显示隐藏移动文件夹
            ShowFolderVisible: false,
            showAddCourseWareVisible: false,
            edit_task_courseware_id_arr: [],
            form: {
                id: 0,
                type: '',
                title: ''
            },
            formFolder: {
                id: 0,
                maxLength: 24,
                title: ''
            },
            pageInfo: {
                pageNumber: 1,
                pageSize: 10,
                total: 0
            },
            file_types: [
                // {'type':1,'name':'排序'},
                { 'type': 2, 'name': '移动' }
            ],
            book_types: [
                { 'book_type': 1, 'book_name': '课本' },
                { 'book_type': 2, 'book_name': '视频' },
                { 'book_type': 3, 'book_name': 'PPT' },
                { 'book_type': 4, 'book_name': '音频' },
            ],
            multipleSelection: [],  //多选复选框
            tableData: [],
            type: 'book',
            pageSizes
        }
    },
    created() {
        this.form.id = this.$route.query.id;
    },
    mounted() {
        this.init();
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            const params = {
                ...this.form,
                ...this.pageInfo
            };
            this.loading = true;

            folderDetail(params).then(res => {
                console.log('courseware_pub_list222', res);
                if (res.code == 200) {
                    this.tableData = res.data.data
                    this.pageInfo.total = res.data.total
                }
                this.loading = false
            })
        },
        search() {
            this.pageInfo.pageNumber = 1;
            this.init();
        },
        delFile(id, is_file) {
            var message = '你确定删除该文件?';
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                delFile({ "id": id, 'is_file': is_file }).then(res => {
                    console.log('courseware_pub_list', res);
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init();
                    } else {
                        this.msgError(res.msg);
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
        handleSortItem(item) {

            this.$prompt('请输入新的序号', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: item.folder_sort,
                inputPattern: /\d+/,
                inputErrorMessage: '序号不合法,仅支持数字'
            }).then(({ value }) => {

                const params = {
                    folder_sort: value,
                    folder_id: this.form.id,
                    id:item.id
                }
                sortFolderCourseware(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.init()
                    }
                })
            })

        },
        add() {
            this.showAddCourseWareVisible = true;
        },
        showType(book_type) {
            for (let i = 0; i < this.book_types.length; i++) {
                if (book_type == this.book_types[i].book_type) {
                    return this.book_types[i].book_name;
                }
            }
        },

        //新增新增文件夹课件
        handleSelectFiles(data) {
            if (data.length <= 0) {
                return
            }
            console.log('------文件夹新增课件--------', data);
            let courseware_id_list = [];
            for (let i = 0; i < data.length; i++) {
                courseware_id_list.push(data[i].id);
            }

            addFolderFile({ "folder_id": this.form.id, 'coursewareidArr': courseware_id_list }).then(res => {
                console.log('addFolderFile', res);
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init();
                } else {
                    this.msgError(res.msg);
                }
            })
        },
        //关闭抽屉
        handleClose() {
            this.ShowFormFolderVisible = false;
            this.formFolder.title = '';
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNumber = val
            this.init()
        },
        handleSelectChange(value) {
            console.log('选中的值：', value);
            //移动文件
            if (value == 2) {
                this.showControlButton2 = true;
                var labelCheck = document.getElementsByClassName('checkbox-label');
                for (var i = 0; i < labelCheck.length; i++) {
                    labelCheck[i].style.display = "block";
                }
            } else {
                this.hideMoveFiles();
            }

            // 在这里处理你的逻辑
        },
        selectFiles() {
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            var values = [];
            checkboxes.forEach(function (checkbox) {
                if (checkbox.checked) { // 检查是否选中
                    values.push(checkbox.value); // 将值添加到数组中
                }
            });
            this.multipleSelection = values;
            console.log('all selected checkbox', this.multipleSelection);
            //显示弹框
            this.ShowFolderVisible = true;
        },
        hideMoveFiles() {
            this.form.type = '';
            this.showControlButton2 = false;
            var labelCheck = document.getElementsByClassName('checkbox-label');
            for (var i = 0; i < labelCheck.length; i++) {
                labelCheck[i].style.display = "none";
            }

            //每次关闭默认设置未选中状态
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(function (checkbox) {
                if (checkbox.checked) { // 检查是否选中
                    checkbox.checked = false;
                }
            });

        },
        reloadInit() {
            this.ShowFolderVisible = false;  //子组件弹框关闭
            this.hideMoveFiles();
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(function (checkbox) {
                if (checkbox.checked) { // 检查是否选中
                    checkbox.checked = false;
                }
            });
            this.init();
        },
    }
}
</script>
<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 150px;
    }
}

.backbtn1 {
    float: right;
}

::v-deep .el-alert {
    border-radius: 0;
}

.checkbox-label {
    position: absolute;
    top: -12px;
    right: -10px;
    display: none;
}

::v-deep .el-dialog__header {
    background: #03A7EF;
}

.content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    margin-bottom: 15px;
    min-height: 900px;

    &__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 20px;

        .title {
            margin-top: 10px;
        }
    }
}
</style>